<template>
  <div>
    <hx-header v-show="$route.meta.header"></hx-header>
    <meddile v-show="$route.meta.middle"></meddile>
    <keep-alive v-if="keep">
      <router-view></router-view>
    </keep-alive>
    <template v-else>
      <router-view></router-view>
    </template>
    <hx-footer v-show="$route.meta.footer"></hx-footer>
  </div>
</template>





<script>
import HxFooter from "./components/HxFooter.vue";
import HxHeader from "./components/HxHeader.vue";
import Meddile from "./components/Meddile.vue";
export default {
  components: { HxHeader, HxFooter, Meddile },
  data() {
    return {
      keep:true,
    }
  },
  watch: {
    $route(newValue, oldValue) {
      this.keep = newValue.meta.keeplive
    }
  },
};
</script>

<style lang="scss" scoped>
</style>